<label class="spoiler">
	<ad-spoiler>
		<input class="sr-only" type="checkbox" />
		<span><slot /></span>
	</ad-spoiler>
</label>

<script>
	class Spoiler extends HTMLElement {
		constructor() {
			super();
			this.querySelector('input')?.addEventListener(
				'click',
				(e) => {
					if (e.target instanceof HTMLInputElement) {
						e.target.checked = e.target.disabled = true;
					}
				},
				{ once: true }
			);
		}
	}
	customElements.define('ad-spoiler', Spoiler);
</script>

<style>
	.spoiler :global(span) {
		position: relative;
		background-color: currentColor;
		border-radius: 0.25rem;
		cursor: pointer;
		user-select: none;
	}

	.spoiler :global(input:disabled ~ span) {
		cursor: text;
	}

	.spoiler :global(input:focus ~ span) {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.spoiler :global(input:focus-visible ~ span) {
		outline: 2px solid currentColor;
	}

	.spoiler :global(input:not(:focus-visible) ~ span) {
		outline: 0;
	}

	.spoiler :global(input:checked ~ span) {
		background-color: hsla(0, 0%, 0%, 0.08);
		user-select: unset;
	}

	.spoiler :global(input:checked ~ span code) {
		background-color: hsla(100, 100%, 100%, 0.08);
		user-select: unset;
	}

	.spoiler :global(input:focus:not(:checked) ~ span) {
		color: var(--theme-text-lighter);
	}

	.spoiler :global(input:not(:checked) ~ span:hover) {
		color: var(--theme-text-lighter);
	}

	.spoiler :global(input:not(:checked) ~ span *) {
		border-color: transparent;
		background-color: transparent;
		color: transparent;
		text-decoration: none;
	}
</style>
